<template>
  <view
    class="kk-tooltip"
    :style="{
      '--theme-bg-color': color,
      opacity: 0.8,
    }"
  >
    <view
      class="kk_tooltip_content"
      @tap="handleClick"
      @longpress="longpressAction"
    >
      <slot></slot>
      <view
        class="kk_tooltip__popper"
        @tap.stop="() => {}"
        :style="[
          style,
          {
            visibility: isShow ? 'visible' : 'hidden',
            color: color === 'white' ? '' : '#fff',
            boxShadow:
              color === 'white'
                ? '0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d'
                : '',
            borderRadius: '8px',
          },
        ]"
      >
        <slot name="content">{{ content }}</slot>
        <view
          class="zb_popper__icon"
          :style="[arrowStyle]"
          :class="[
            {
              zb_popper__up: placement.indexOf('bottom') === 0,
              zb_popper__arrow: placement.indexOf('top') === 0,
              zb_popper__right: placement.indexOf('right') === 0,
              zb_popper__left: placement.indexOf('left') === 0,
            },
          ]"
        >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    color: {
      type: String,
      default: "#000",
    },
    placement: {
      type: String,
      default: "top",
    },
    content: {
      type: String,
      default: "",
    },
    show: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      isShow: this.visible,
      title: "Hello",
      arrowLeft: 0,
      query: null,
      style: {},
      arrowStyle: {},
    };
  },
  onLoad() {},
  watch: {
    isShow: {
      handler(val) {
        this.$emit("update:visible", val);
      },
      immediate: true,
    },
    visible: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.getPosition();
          });
        }
        this.isShow = val;
      },
      immediate: true,
    },
  },
  mounted() {
    // #ifdef H5
    window.addEventListener("click", () => {
      this.isShow = false;
    });
    // #endif
    this.getPosition();
  },
  methods: {
    close() {
      this.isShow = false;
    },
    fixedWrap() {
      this.isShow = false;
    },
    async handleClick() {
      if (this.isShow) {
        return (this.isShow = false);
      }
    },

    async longpressAction() {
      if (this.isShow) {
        return (this.isShow = false);
      }
      await this.getPosition();
      this.isShow = true;
    },
    getPosition() {
      return new Promise((resolve) => {
        uni
          .createSelectorQuery()
          .in(this)
          .selectAll(".kk_tooltip_content,.kk_tooltip__popper")
          .boundingClientRect(async (data) => {
            let { left, bottom, right, top, width, height } = data[0];
            let obj1 = data[1];
            let objStyle = {};
            let objStyle1 = {};
            switch (this.placement) {
              case "top":
                if (obj1.width > width) {
                  objStyle.left = `-${(obj1.width - width) / 2}px`;
                } else {
                  objStyle.left = `${Math.abs(obj1.width - width) / 2}px`;
                }

                objStyle.bottom = `${height + 8}px`;
                objStyle1.left = obj1.width / 2 - 6 + "px";
                break;
              case "top-start":
                objStyle.left = `0px`;
                objStyle.bottom = `${height + 8}px`;
                break;
              case "top-end":
                objStyle.right = `0px`;
                objStyle.bottom = `${height + 8}px`;
                objStyle1.right = `8px`;
                break;
              case "bottom":
                if (obj1.width > width) {
                  objStyle.left = `-${(obj1.width - width) / 2}px`;
                } else {
                  objStyle.left = `${Math.abs(obj1.width - width) / 2}px`;
                }
                objStyle.top = `${height + 8}px`;
                objStyle1.left = obj1.width / 2 - 6 + "px";
                break;
              case "bottom-start":
                objStyle.left = `0px`;
                objStyle.top = `${height + 8}px`;
                objStyle1.left = `8px`;
                break;

              case "bottom-end":
                objStyle.right = `0px`;
                objStyle.top = `${height + 8}px`;
                objStyle1.right = `8px`;
                break;

              case "right":
                objStyle.left = `${width + 8}px`;
                if (obj1.height > height) {
                  objStyle.top = `-${(obj1.height - height) / 2}px`;
                } else {
                  objStyle.top = `${Math.abs((obj1.height - height) / 2)}px`;
                }

                objStyle1.top = `${obj1.height / 2 - 6}px`;
                break;
              case "right-start":
                objStyle.left = `${width + 8}px`;
                objStyle.top = `0px`;
                objStyle1.top = `8px`;
                break;

              case "right-end":
                objStyle.left = `${width + 8}px`;
                objStyle.bottom = `0px`;
                objStyle1.bottom = `8px`;
                break;

              case "left":
                objStyle.right = `${width + 8}px`;

                if (obj1.height > height) {
                  objStyle.top = `-${(obj1.height - height) / 2}px`;
                } else {
                  objStyle.top = `${Math.abs((obj1.height - height) / 2)}px`;
                }

                objStyle1.top = `${obj1.height / 2 - 6}px`;
                break;

              case "left-start":
                objStyle.right = `${width + 8}px`;
                objStyle.top = `0px`;
                objStyle1.top = `8px`;
                break;

              case "left-end":
                objStyle.right = `${width + 8}px`;
                objStyle.bottom = `0px`;
                objStyle1.bottom = `8px`;
                break;
            }
            this.style = objStyle;
            // 三角形箭头
            this.arrowStyle = objStyle1;
            resolve();
          })
          .exec();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$theme-bg-color: var(--theme-bg-color);

.kk-tooltip {
  position: relative;
}
.kk_tooltip_content {
  height: 100%;
  /* float: left; */
  position: relative;
  display: inline-block;

  // display: flex;
  // flex-direction: row;
  // align-items: center;
  /* overflow: hidden; */
}
.kk_tooltip__popper {
  /* transform-origin: center top; */
  background: $theme-bg-color;

  visibility: hidden;
  // color:'#fff';
  position: absolute;
  border-radius: 4px;
  font-size: 12px;
  padding: 10px;
  min-width: 10px;
  word-wrap: break-word;
  display: inline-block;
  white-space: nowrap;
  z-index: 9;
}
.zb_popper__icon {
  width: 0;
  height: 0;
  z-index: 9;
  position: absolute;
}
.zb_popper__arrow {
  bottom: -8px;
  /* transform-origin: center top; */
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid $theme-bg-color;
}
.zb_popper__right {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid $theme-bg-color;
  left: -5px;
}

.zb_popper__left {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid $theme-bg-color;
  right: -5px;
}

.zb_popper__up {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid $theme-bg-color;
  top: -5px;
}
.fixed {
  position: absolute;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: auto;
  background: red;
  z-index: -1;
}
</style>
